import { Text, View, TouchableOpacity, StyleSheet, FlatList, ImageBackground, Image } from "react-native"
import { useState, useEffect } from 'react';
import { AntDesign } from '@expo/vector-icons';
import { useAuth } from "../context/AuthProvider";

const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
const tagsData = [
    { label: '全部', id: 0 },
    { label: '待付款', id: 1 },
    { label: '已支付', id: 2 },
    { label: '已出租', id: 3 },
    { label: '已完成', id: 4 },
];
const Order = ({ route }) => {
    const { user } = useAuth();
    const [shopState, setshopState] = useState("全部")
    const [selectTab, setSelectTab] = useState(0);
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    useEffect(() => {
        console.log(shopState);
        fetch('http://10.7.89.96:3000/order',
            {
                method: 'POST',
                page,
                size: 20,
                body: JSON.stringify({
                    shopState: shopState,
                    userName: user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setList(res.List)
                setList([...list, ...res.list])
            })
    }, [page, shopState])
    useEffect(() => {
        console.log(selectTab)
        for (var i = 0; i < tagsData.length; i++) {
            if (tagsData[i].id == selectTab) {
                setshopState(tagsData[i].label)
            }
        }
    }, [selectTab])
    const changeType = (id) => {
        setSelectTab(id)
        setPage(1);
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const DeleteBtn =(shopId)=>{
        fetch('http://10.7.89.96:3000/shopDelete',{
            method:"POST",
            body:JSON.stringify({
                shopId:shopId,
            })
        })
        .then(res=>res.json())
        .then(res=>{
                if (res.code == 200) {
                    alert("删除成功");
                    setList(res.List)
                } else {
                    setList([...list, ...res.data.content])
                    ToastAndroid.show("删除失败",ToastAndroid.SHORT);
                }
        })
    }
    
    const IfDue = (shopId,ifDue,overdueDeposit) => {
        fetch('http://10.7.89.96:3000/over',
            {
                method: 'POST',
                page,
                size: 20,
                body: JSON.stringify({
                    shopId: shopId,
                    ifDue:ifDue,
                    overdueDeposit:overdueDeposit
                })
            })                                          
            .then(res => res.json())
            .then(res => {
                // console.log(777777777777);
                if (res.code == 200) {
                    ToastAndroid.show("逾期成功", ToastAndroid.SHORT);
                } else {
                    ToastAndroid.show("逾期失败", ToastAndroid.SHORT);
                }
            })
    }

    const renderItem = ({ item }) => (
        <View style={styles.newsItem}>
            {/* 出租人头像、用户名等信息 */}
            <View style={{ flexDirection: 'row' ,marginHorizontal: 10,}}>
                <View>
                    <Image
                        style={{ width: 30, height: 30 }}
                        source={{
                            uri: item.avatarUrl
                        }}
                    />
                </View>
                <View style={styles.typeView}>
                    <Text style={styles.type}>{item.shopName}</Text>
                </View>
                <View style={styles.delete1}>
                    <View style={styles.delete2} >
                        <AntDesign name="delete" size={24} color="black" onPress={() => DeleteBtn(item.shopId)} />
                    </View>
                </View>
            </View>
            {/* 出租人物品信息 */}
            <View style={styles.item}>
                {/* 全选 */}
                <View style={styles.itemImg}>
                    <Image
                        style={{ width: 80, height: 80, }}
                        source={{
                            uri: item.shopImage
                        }}
                    />
                </View>
                <View style={styles.itemText}>
                    <Text style={{ marginTop: 10, }}>{item.shopText}</Text>
                    <Text style={{ marginTop: 10, }}>押金￥{item.shopDeposit}</Text>
                    <Text style={styles.pricetext}>单价￥{item.shopPrice}</Text>
                    <TouchableOpacity style={[styles.uploadBtnStyle]} >
                    <Text 
                        style={styles.uploadText} 
                        onPress={() => IfDue(item.shopId,item.ifDue,item.overdueDeposit)}>{item.ifDue}</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={styles.tabBtn}>
                    {
                        tagsData.map(item => (
                            <Btn
                                onPress={() => {
                                    changeType(item.id)
                                    // console.log(item.id);
                                }}
                                key={item.id}
                                style={{
                                    width: '18%',
                                    height: 30,
                                    borderRadius: 5,
                                    backgroundColor: selectTab == item.id ? "orange" : '#aaa'
                                }}
                            >
                                {item.label}
                            </Btn>
                        ))
                    }
                </View>
                <FlatList
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.id}
                />
            </ImageBackground>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        // marginHorizontal: 15,
        flex: 1
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
    tabBtn: {
        flexDirection: 'row',
        justifyContent: "space-around",
        marginVertical: 20
    },
    newsItem: {
        paddingVertical: 10,
        borderBottomColor: '#ccc',
        borderBottomWidth: 1
    },
    newsTitle: {
        fontSize: 16,
        marginBottom: 8
    },
    typeView: {
        marginRight: 20,
        paddingHorizontal: 5,
        backgroundColor: '#f00',
        borderRadius: 3
    },
    type: {
        color: '#000',
    },
    typeView: {
        marginRight: 20,
        paddingHorizontal: 5,
        borderRadius: 3
    },
    delete1: {
        flex: 1,
    },
    delete2: {
        alignSelf: 'flex-end',
    },
    uploadBtnStyle: {
        marginLeft: 'auto',
        marginTop: 5,
        height: 35,
        width: 70,
        backgroundColor: 'white',
        justifyContent: 'center',
    },
    uploadText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
        borderWidth: 1,
        borderColor: '#cacaca',
        fontSize: 15,
        height: 30,
        borderRadius: 5,
        backgroundColor: 'orange'
    },
    item: {
        marginTop: 5,
        backgroundColor: "white",
        height: 100,
        opacity: 0.8,
    },
    itemImg: {
        borderWidth: 1,
        width: 80,
        height: 80,
        marginLeft: 15,
        marginTop: 10,
    },
    itemText: {
        width: 290,
        height: 80,
        marginLeft: 115,
        marginTop: -80,
    },
    pricetext: {
        marginLeft: 'auto',
        marginTop: -40,
        fontSize: 17,
        color: 'red',
    }
});
export default Order